import React from 'react';
import { Form, Table } from 'antd';
import EvaluationItems from './EvaluationItems';

const AbilityDetail = ({ data, ...rest }) => {
    const { levels = [] } = data || {};

    const columns = [
        {
            title: '等级',
            dataIndex: 'level'
        },
        {
            title: '最终评分(X)',
            dataIndex: 'min',
            align: 'center',
            render: (text, record) => (
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    {text}
                    <span style={{ margin: '0 8px' }}>
                        {text === 0 ? '≤' : '<'}
                        {' X ≤'}
                    </span>
                    {record.max}
                </div>
            )
        },
        {
            title: '合格标准',
            dataIndex: 'qualified',
            align: 'center',
            render: text => (text === 1 ? '满足该等级时' : '')
        },
        {
            title: '提前转正标准',
            dataIndex: 'entry',
            align: 'center',
            render: text => (text === 1 ? '满足该等级时' : '')
        }
    ];

    return (
        <>
            <Form {...rest}>
                <Form.Item label="能力评估说明" style={{ wordBreak: 'break-all' }}>
                    {data?.projectExplain || '--'}
                </Form.Item>
                <Form.Item label="评估等级划分">
                    <Table
                        rowKey="level"
                        columns={columns}
                        dataSource={levels}
                        pagination={false}
                        scroll={{ x: 'max-content' }}
                    />
                </Form.Item>
                <Form.Item label="评估细项">
                    <EvaluationItems data={data} />
                </Form.Item>
            </Form>
        </>
    );
};

export default AbilityDetail;
